<template>
    <view class="component-service-insurance" :style="{ padding: padding }">
        <view class="title-box">
            <view class="title" @click="insuranceModal">
                <text class="text">意外保</text>
                <text class="iconfont icon-shuoming"></text>
            </view>
            <text class="desc">全面保证您的人身财产安全</text>
        </view>
        <view class="switch-container">
            <text class="price">¥ {{ price }}</text>
            <view v-show="showSwitch" class="switch" @click="changeState">
                <widget-switch :open="state" />
            </view>
        </view>
    </view>
</template>

<script>
import WidgetSwitch from "@/components/widgets/switch";
export default {
    name: "component-service-insurance",
    data() {
        return {
            state: false,
        };
    },
    components: {
        WidgetSwitch,
    },
    props: {
        showSwitch: {
            type: Boolean,
            default: true,
        },
        price: {
            type: [Number, String],
            default: 0,
        },
        insurance: {
            type: Boolean,
            default: false,
        },
        padding: {
            type: String,
            default: "38rpx 40rpx",
        },
    },
    created() {
        this.state = this.insurance;
    },
    mounted() {},
    destroyed() {},
    methods: {
        changeState() {
            this.state = !this.state;
            this.$emit("change", this.state);
        },
        insuranceModal() {
            uni.showModal({
                title: "什么是意外保？",
                content: "意外保是一款保险产品，全面保障您的人身财产安全。",
                showCancel: false,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.component-service-insurance {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #ffffff;
    .title-box {
        .title {
            font-size: 30rpx;
            line-height: 30rpx;
            .text {
                font-weight: bold;
                color: #010101;
            }
            .iconfont {
                color: #8194f2;
                margin-left: 8rpx;
            }
        }
        .desc {
            display: inline-block;
            line-height: 22rpx;
            font-size: 22rpx;
            color: #333333;
            margin-top: 16rpx;
        }
    }
    .switch-container {
        display: flex;
        line-height: 100%;
        .price {
            font-size: 30rpx;
            color: #ec7655;
        }
        .switch {
            margin-left: 38rpx;
        }
    }
}
</style>